<template>
  <border
    class="video-surveillance"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :isNoImg="borderConfig.isNoImg"
    :goPageUrl="borderConfig.goPageUrl">
      <div class="module-content" slot="module-content">
        <div class="video-module">
          <img :src="videoImgSrc" alt=""/>
          <div class="border border-top-left" v-if="themeConfig.moduleTheme === 'default'">{{borderConfig.titleText}}</div>
          <div class="border border-top-right" v-if="themeConfig.moduleTheme === 'default'"></div>
          <div class="border border-left" v-if="themeConfig.moduleTheme === 'default'"></div>
          <div class="border border-right" v-if="themeConfig.moduleTheme === 'default'"></div>
          <div class="border border-bottom" v-if="themeConfig.moduleTheme === 'default'"></div>
          <div class="border border-flat-top-left" v-if="themeConfig.moduleTheme === 'flat'"></div>
          <div class="border border-flat-top-center" v-if="themeConfig.moduleTheme === 'flat'">{{borderConfig.titleText}}</div>
          <div class="border border-flat-top-right" v-if="themeConfig.moduleTheme === 'flat'"></div>
          <div class="border border-flat-left" v-if="themeConfig.moduleTheme === 'flat'"></div>
          <div class="border border-flat-right" v-if="themeConfig.moduleTheme === 'flat'"></div>
          <div class="border border-flat-bottom" v-if="themeConfig.moduleTheme === 'flat'"></div>
          <div class="video-content" :class="{'flat': themeConfig.moduleTheme === 'flat'}">
            <div class="view-permission" v-if="organType == 6 && organModelType != 6">
              <div class="view-permission-content">
                <img src="./../../assets/images/icon/empty.png" alt="">
                <p>此模块只支持项目级别数据，请选择项目节点！</p>
              </div>
            </div>
            <object v-else
              id="objectHtml"
              width='640' height='377'
              name='StrobeMediaPlayback'
              type='application/x-shockwave-flash'
              classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' >
              <param name='movie' value='./../../utils/StrobeMediaPlayback.swf' />
              <param name='quality' value='high' />
              <param name='bgcolor' value='#000000' />
              <param name='allowfullscreen' value='true' />
              <param name='flashvars'
                     value='&src=rtmp://58.200.131.2:1935/livetv/hunantv&autoHideControlBar=true&streamType=live&autoPlay=true&verbose=true'/>
              <!--<embed src='http://192.168.3.33:8080/h5/leader-view-sany/StrobeMediaPlayback.swf'-->
              <embed :src='videoSwf'
                     width='640' height='377'
                     id='StrobeMediaPlayback'
                     quality='high'
                     bgcolor='#000000'
                     name='StrobeMediaPlayback'
                     allowfullscreen='true'
                     :hidden="videoControlShow"
                     controls='playbutton'
                     pluginspage='http://www.adobe.com/go/getflashplayer'
                     :flashvars='videoSource'
                     type='application/x-shockwave-flash'></embed>
            </object>
          </div>
        </div>
        <div class="video-source">
          <div class="video-li"
               :class="{'playing': index == playIndex, 'empty': videoList.length <= index}"
               v-for="(item, index) in videoDefaultList"
               :key="index"
               @click="tabVideo(index)">
            <img :src="videoList[index].previewImgUrl" v-if="videoList.length > index" alt="">
            <span class="play" v-if="videoList.length > index"></span>
          </div>
        </div>
      </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
// require('./../../utils/flashVideo')
export default {
  name: 'videoSurveillance',
  components: {
    Border
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x2',
        icon: require('./../../assets/images/icon/icon.png'),
        titleText: '',
        goPageUrl: '',
        isNoImg: true
      },
      videoList: [],
      videoDefaultList: ['', '', '', '', ''],
      videoSource: '',
      videoSwf: require('./../../utils/StrobeMediaPlayback.swf'),
      videoControlShow: true,
      playIndex: 0
    }
  },
  computed: {
    themeConfig () {
      return this.$store.state.themeConfig
    },
    videoImgSrc () {
      return require(`./../../assets/images/${this.themeConfig.moduleTheme}/video.png`)
    },
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    },
    organType () {
      return this.$store.state.moduleList[34].organType
    },
    organModelType () {
      return this.$store.state.organModel.orgType
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type) {
      if (type === 'init') {
        this.wisdomParkApi.carouselConfig({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.videoList = res.data.data
            this.tabVideo(0)
          } else {
            this.videoList = []
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.videoList = []
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
      }
    },
    // 切换播放视频
    tabVideo (index) {
      if (this.videoList.length === 0) {
        return false
      }
      this.playIndex = index
      this.borderConfig.titleText = this.videoList[index].title
      let obj = {
        organId: this.organId,
        cameraIndexCode: this.videoList[index].cameraIndexCode
      }
      this.wisdomParkApi.getCameraPreviewURL(obj).then(res => {
        if (res.data.code === '0') {
          this.videoSource = `&src=${res.data.data}&autoHideControlBar=true&streamType=live&autoPlay=true&verbose=true`
          let dom = document.getElementById('StrobeMediaPlayback')
          document.getElementById('StrobeMediaPlayback').remove()
          dom.flashvars = this.videoSource
          this.$nextTick(function () {
            document.getElementById('objectHtml').appendChild(dom)
          })
        } else {
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
      // let list = ['rtmp://58.200.131.2:1935/livetv/hunantv', 'rtmp://live.hkstv.hk.lxdns.com/live/hks',
      // 'rtmp://ns8.indexforce.com/home/mystream', 'rtmp://media3.scctv.net/live/scctv_800',
      // 'rtmp://media3.sinovision.net:1935/live/livestream']
      // this.videoSource = `&src=${list[index]}&autoHideControlBar=true&streamType=live&autoPlay=true&verbose=true`
      // let dom = document.getElementById('StrobeMediaPlayback')
      // document.getElementById('StrobeMediaPlayback').remove()
      // dom.flashvars = this.videoSource
      // console.log(this.videoSource)
      // this.$nextTick(function () {
      // document.getElementById('objectHtml').appendChild(dom)
      // })
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
.video-surveillance {
  .module-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .video-module {
      width: 100%;
      height: 80%;
      position: relative;
      img {
        width: 100%;
        position: relative;
        z-index: 0;
        opacity: 0;
      }
      .border {
        position: absolute;
        z-index: 10;
      }
      .border-top-left {
        top: 0;
        left: 0;
        z-index: 11;
        width: 20.74%;
        height: 6.83%;
        background: url("./../../assets/images/default/video/video-top-left.png") no-repeat center;
        background-size: 100% 100%;
        font-size: 14px;
        color: #95b7e6;
        padding-left: 10px;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        align-items: center;
        align-content: center;
      }
      .border-top-right {
        top: 0;
        right: 0;
        width: 80%;
        height: 3.04%;
        background: url("./../../assets/images/default/video/video-top-right.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-left {
        bottom: 1.7%;
        left: 0;
        width: 2px;
        height: calc(100% - 6.83% - 1.7%);
        background: url("./../../assets/images/default/video/video-left.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-right {
        top: 3.04%;
        right: 0;
        width: 2px;
        height: calc(100% - 3.036% - 1.7%);
        background: url("./../../assets/images/default/video/video-right.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-bottom {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 1.7%;
        background: url("./../../assets/images/default/video/video-bottom.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-flat-top-left {
        top: 0;
        left: 0;
        width: 33.8%;
        height: 3.98%;
        background: url("./../../assets/images/flat/video/video-flat-top-left.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-flat-top-center {
        top: 0;
        left: 33.72%;
        width: 32.77%;
        height: 7.21%;
        background: url("./../../assets/images/flat/video/video-flat-top-center.png") no-repeat center;
        background-size: 100% 100%;
        font-size: 14px;
        color: #95b7e6;
        padding-left: 10px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
      }
      .border-flat-top-right {
        top: 0;
        right: 0;
        width: calc(100% - 33.72% - 32.7%);
        height: 2.47%;
        background: url("./../../assets/images/flat/video/video-flat-top-right.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-flat-left {
        top: 3.98%;
        left: 0;
        width: 3px;
        height: calc(100% - 4.4%);
        background: url("./../../assets/images/flat/video/video-flat-left.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-flat-right {
        top: 2.4%;
        right: 0;
        width: 1.38%;
        height: calc(100% - 2.47%);
        background: url("./../../assets/images/flat/video/video-flat-right.png") no-repeat center;
        background-size: 100% 100%;
      }
      .border-flat-bottom {
        bottom: 1px;
        left: 1px;
        width: calc(100% - 1.38%);
        height: 3px;
        background: url("./../../assets/images/flat/video/video-flat-bottom.png") no-repeat center;
        background-size: 100% 100%;
      }
      .video-content {
        width: 100%;
        height: calc(100% - 6px);
        position: absolute;
        top: 6px;
        left: 0;
        z-index: 1;
        &.flat {
          height: calc(100% - 10px);
          top: 10px;
        }
        .view-permission {
          width: 100%;
          height: 100%;
          position: relative;
          .view-permission-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            img {
              width: 104px;
              opacity: 1;
              margin-bottom: 6px;
            }
            p {
              color: #2462FF;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }
      }
      object {
        width: 100%;
        height: 100%;
      }
      embed {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%!important;
        height: calc(100% - 4px)!important;
      }
    }
    .video-source {
      width: 100%;
      overflow: hidden;
      margin-top: 4px;
      height: calc(20% - 4px);
      .video-li {
        width: calc((100% - 32px) / 5);
        position: relative;
        height: 100%;
        margin-right: 8px;
        overflow: hidden;
        float: left;
        border: 2px solid #3164EE;
        box-sizing: border-box;
        cursor: pointer;
        background: url("./../../assets/images/icon/empty-list.png") no-repeat center;
        background-size: 74px;
        &.empty {
          cursor: default;
        }
        &.playing {
          cursor: default;
          .play {
            background: url("./../../assets/images/icon/playing.png") center;
            background-size: 100% 100%;
          }
        }
        &:last-of-type {
          margin-right: 0;
        }
        img {
          width: 100%;
          display: block;
        }
        .play {
          display: block;
          width: 40px;
          height: 40px;
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 10;
          transform: translate(-50%, -50%);
          background: url("./../../assets/images/icon/play.png") center;
          background-size: 100% 100%;
        }
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .video-surveillance {
    .module-content {
      .video-module {
        .video-content {
          .view-permission-content {
            .img {
              width: 125px;
            }
          }
        }
      }
    }
  }
}
</style>
